<template>
    <div>
      <van-nav-bar
        left-arrow
        title="施工攻略"
        right-text="分享"
        @click-right="share('weixin')"
        @click-left="aaa"
      />
<!--      $router.go(-1)-->
<!--      <van-sticky>-->
<!--        <div class="demo-nav" style>-->
<!--          <div class="demo-nav__title">施工详情</div>-->
<!--          <span @click="shop()" class="demo-nav__back">-->
<!--          <svg viewBox="0 0 1000 1000" @click="toBack">-->
<!--            <path fill="#969799" fill-rule="evenodd" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z">-->
<!--            </path>-->
<!--          </svg>-->
<!--        </span>-->
<!--        </div>-->
<!--      </van-sticky>-->

<!--      <div style="z-index: 999999;font-size: 1.5rem;position: absolute;left: -130px;top: 20px"><van-icon name="arrow-left" /></div>-->
      <van-swipe :autoplay="3000" @change="onChange">
        <van-swipe-item v-for="(image, index) in lsitAllById" :key="index">
          <div class="banner_wrapper">
            <img v-lazy="image.pictureUrl" :width="200" />
          </div>
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}</div>
        </template>
      </van-swipe>

      <div style="width: 100%;margin: 0rem 1.2rem 0rem 1.2rem">
        <div align="left" style="margin: 1.4rem 0rem 1.2rem 0rem">
          <p style="width: 20rem;font-size: 1.4rem;font-weight:500">
            {{listAll.strategyTheme}}
          </p>
        </div>
      </div>



      <!--<div class="lateral-sliding">
        <div class="lateral-sliding-item">
          <div class="each">
            <span>户型</span>
            <span>{{listAll.strategyHabitable}}居</span>
          </div>
          <div class="each">
            <span>面积</span>
            <span>{{listAll.meters}}㎡</span>
          </div>
          <div class="each">
            <span>地区</span>
            <span>石家庄</span>
          </div>
          <div class="each">
            <span>风格</span>
            <span>{{listAll.strategyName}}</span>
          </div>
          <div class="each">
            <span>预算</span>
            <span>{{listAll.priceYusuan}}万</span>
          </div>
          <div class="each">
            <span>方式</span>
            <span>{{listAll.fangshi}}</span>
          </div>
        </div>
      </div>-->
<!--      style="margin: 2rem 1rem 0rem 1rem;width: 100%"-->
      <div align="left" style="width: 20rem;margin: 2rem 0rem 0rem 1.2rem"  >
      <p v-html="listAll.constructionStrategyTitle"></p>
      </div>


      <!--<treeselect
        :options="optionsMechanism"
        placeholder="select...."
        v-model="value"
       />
      <div v-for="lsit in treeData">
        <span>*******{{lsit.remark}}****</span>
      </div>

<h1>assa</h1>-->

      <!--启用评论框-->
      <!--<van-popup
        v-model="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px;"
      >
        <div style="text-align:left;margin-left: 5px;">共有4条评论</div>
        <van-divider />
        <div v-if="treeData" v-for="(item, index) in treeData" :key="index" >
          <div style="text-align:left;margin-left: 5px;">
            <van-card
              :num=item.createTime
              :desc=item.remark
              title="昵称"
              thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
            />
            &lt;!&ndash;thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"&ndash;&gt;
            &lt;!&ndash;{{ item.remark }}<span style="text-align: right;display: block">{{item.createTime}}</span>&ndash;&gt;
          </div>
          <van-divider />
          <div v-for="(item1, index) in item.treeList">
            <div style="text-align:left;margin-left: 35px;">
              <van-card
                :num=item1.createTime
                :desc=item1.remark
                title="昵称"
                thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
              />
              &lt;!&ndash;{{item1.remark}}<span style="text-align: right;display: block">{{item.createTime}}</span>&ndash;&gt;
            </div>
            <van-divider />
            <div v-for="(item2, index) in item1.treeList">
              <div style="text-align:left;margin-left: 65px;">
                <van-card
                  :num=item2.createTime
                  :desc=item2.remark
                  title="昵称"
                  thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
                />
                &lt;!&ndash;{{item2.remark}}<span style="text-align: right;display: block">{{item.createTime}}</span>&ndash;&gt;
              </div>
              <van-divider />
            </div>
          </div>

        </div>
      </van-popup>-->

      <van-popup v-model="showList" closeable close-icon="close" round  position="bottom" :style="{ height: '60%' }">
        <div align="left" class="wrapper" @click.stop>
          <div class="block">
            <div class="block-top">
              <p>全部评论{{treeData.length}}条</p>
            </div>
            <div class="block-list">
              <div class="block-list-demo" v-for="item in treeData" :key="item.id">  <!---->
                <img :src="item.customerHandImage">
                <div class="list-demo-content">
                  <div>
                    <h3>{{item.customerNickName}}</h3>
                    <p>{{item.createTime}}</p>
                  </div>
                  <p style="width: 70%;font-size: 0.7rem">{{item.remark}}</p>
                </div>
                <div class="block-list-like">
<!--                  <van-icon name="like-o"/>-->
<!--                  <span class="block-list-likes" style="font-size: 0.8rem">&lt;!&ndash;{{item.localReplyFabulous}}&ndash;&gt;</span>-->
                </div>
              </div>
            </div>
            <div class="block-bottom">
              <van-cell-group>
                <van-field
                  v-model="text"
                  clearable label=""
                  left-icon="edit"
                  placeholder="评论一下~"
                  center
                  style="background-color:#ebedf0;height:2.4rem;padding: 1rem;border-radius: 0.5rem"
                  @click-left-icon="remark()"
                />
              </van-cell-group>
            </div>
          </div>
        </div>
      </van-popup>

      <br>
      <br>
      <br>
      <van-goods-action>
        <!--<van-field v-model="text" placeholder="写下你的想法" style="background-color: gainsboro;border-radius:25px;width: 250px" />-->
        <div style="width: 100%;text-align: right;margin: 0 20px 0 0;">
          <van-icon :name="status==1?name1:name" size="25" style="line-height: 20px" @click="likeAdd()"/>
          <van-icon :name="status1==1?name3:name2" size="25" style="line-height: 20px" @click="addConstruction()"/>
          <van-icon name="chat-o" size="25" style="line-height: 20px" @click="showList = true"/>
        </div>
        <!--<van-button type="default" size="mini" @click="remark()">发送</van-button>-->
      </van-goods-action>
    </div>
</template>

<script>

  import { findAllZhengWuById,findAllPicById } from "@/api/commodity/strategy";
  import {addLike,findLike,findConstruction,addConstruction,addRemark,findAllList} from "@/api/constructionLike/constructionLike"
  import { Toast } from 'vant';
  // import Treeselect from '@riophae/vue-treeselect'
  // import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  export default {
        name: "tupian",
      data(){
          return{
            showList:false,
            name: 'like-o',
            name1: require('@/assets/xin.png'),
            name2: 'star-o',
            name3: require('@/assets/wujiaoxin.png'),
            treeData:[],
            buttons: [{
              title: '我的好友',
              extra: {
                scene: 'WXSceneSession'
              }
            },
              {
                title: '朋友圈',
                extra: {
                  scene: 'WXSceneTimeline'
                }
              },
            ],
            // images: [
            //   'https://img01.yzcdn.cn/vant/apple-1.jpg',
            //   'https://img01.yzcdn.cn/vant/apple-2.jpg',
            // ],
            listAll:Object,
            current: 0,
            lsitAllById:[],
            listLike:[],
            listConstruction:[],
            constructionStrategyId:0,
            isLoading: false,
            text:'',
            status:0,
            status1:0,
            lujing: null,
          }
      },
    created() {
          this.constructionStrategyId =this.$route.query && this.$route.query.constructionStrategyId;
          console.log("****this.constructionStrategyId*******"+this.constructionStrategyId)
          this.getList();
          this.getListById();
    },
    // components: { Treeselect },
    mounted() {
      if(window.plus) {
        this.updateSerivces();
      }
    },
    methods:{

      aaa(){
        this.$router.push({
          path:"/strategy_index",
          query:{
            type: "b"
          }});
      },
      remark(){
        addRemark({constructionStrategyId:this.constructionStrategyId,remark:this.text}).then(res=>{
          if (res.status == 200) {
            Toast('评论成功');
            this.isLoading = false;
            this.getList();
            this.text='';
          }
        })
      },
      likeAdd(){
        if(this.listLike.status == 1){
          console.log("取消点赞")
          addLike({constructionStrategyId:this.listAll.constructionStrategyId,status:'0'}).then(response => {
            if (response.status == 200) {
              Toast('取消点赞');
              this.isLoading = false;
              this.getList();
            }
          });
        }else{
          console.log("点赞")
          addLike({constructionStrategyId:this.listAll.constructionStrategyId,status:'1'}).then(response => {
            if (response.status == 200) {
              Toast('点赞成功');
              this.isLoading = false;
              this.getList();
            }
          });
        }
      },
      addConstruction(){
        this.getList();
        if(this.listConstruction.status == 1){
          console.log("取消收藏")
          addConstruction({constructionStrategyId:this.listAll.constructionStrategyId,status:'0'}).then(response => {
            if (response.status == 200) {
              Toast('取消收藏');
              this.isLoading = false;
              this.getList();
            }
          });
        }else{
          console.log("收藏")
          addConstruction({constructionStrategyId:this.listAll.constructionStrategyId,status:'1'}).then(response => {
            if (response.status == 200) {
              Toast('收藏成功');
              this.isLoading = false;
              this.getList();
            }
          });
        }
      },
      /**
       * 获取微信分享通道
       */
      updateSerivces() {
        let _this = this;
        plus.share.getServices(function (s) {
          _this.shares = {};
          for (var i in s) {
            var t = s[i];
            _this.shares[t.id] = t;
          }
          _this.sweixin = _this.shares['weixin'];
          _this.sqq = _this.shares['qq'];
          _this.sinaweibo = _this.shares['sinaweibo'];
        }, function (e) {
          plus.nativeUI.alert('获取分享服务列表失败：' + e.message);
        });
      },
      //第三方分享
      share(a) {
        let _this = this;

        if(a == 'weixin'){
          let msg = {
            type: 'web', //分享的内容的类型
            title: '淘小建自建房平台美图太赞了,分享给你',
            content: this.zhuti,
            thumbs: [this.lujing],
            href: 'http://51jhf.com/txj/#/tupian?constructionStrategyId='+this.constructionStrategyId,
            extra: {
              scene: "WXSceneSession"
            } // 'WXSceneSession'分享给好友，'WXSceneTimeline'分享到朋友圈
          }
          plus.nativeUI.actionSheet({
            title: '分享到微信',
            cancel: '取消',
            buttons: _this.buttons,
          }, function (e) {
            (e.index > 0) && _this.sharePage(_this.sweixin, msg, _this.buttons[e.index - 1]);
          })
        }
      },

      /**
       * 触发分享
       */
      sharePage(srv, msg, button) {
        let _this = this;
        // plus.nativeUI.alert('分享操作：');
        if (!srv) {
          plus.nativeUI.alert('无效的分享服务！');
          return;
        }
        button && (msg.extra = button.extra);
        // 发送分享
        if (srv.authenticated) {
          // plus.nativeUI.alert('---已授权---');
          _this.doShare(srv, msg);
        } else {
          // plus.nativeUI.alert('---未授权---');
          srv.authorize(function () {
            _this.doShare(srv, msg);
          }, function (e) {
            plus.nativeUI.alert('认证授权失败：' + JSON.stringify(e));
          });
        }
      },
      /**
       * 开始分享
       */
      doShare(srv, msg) {
        let _this = this;
        srv.send(msg, function () {
          plus.nativeUI.alert('分享到"' + srv.description + '"成功！');
        }, function (e) {
          plus.nativeUI.alert('分享到"' + srv.description + '"失败: ' + JSON.stringify(e));
        });
      },




      toBack(){
        this.$router.go(-1);//返回上一层
      },
      onChange(index){
        this.current = index;
      },

          getList(){
            findAllList(this.constructionStrategyId).then(res=>{
              this.treeData = res.data
            })

            findAllZhengWuById(this.constructionStrategyId).then(res=>{
                this.listAll = res.data.data
              this.lujing = res.data.data.strategyZhutuUrl
              this.zhuti = res.data.data.strategyTheme
              console.log("************res.data.data.strategyZhutuUrl*************"+res.data.data.strategyZhutuUrl)
            })
            findLike(this.constructionStrategyId).then(res=>{
              this.listLike = res.data.data;
              this.status = res.data.data.status;
            })
            findConstruction(this.constructionStrategyId).then(res=>{
              this.listConstruction = res.data.data;
              this.status1 = res.data.data.status;
            })
          },
      getListById(){
        findAllPicById(this.constructionStrategyId).then(res=>{
            this.lsitAllById = res.data
          console.log("***res.data.data.pictureUrl*****"+JSON.stringify(res.data))
        })
      }
    }


  }
</script>

<style scoped>
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  .banner_wrapper {
    width: 100%;
    height: 60vw;
    overflow: hidden;
  }
  .banner_wrapper img {
    transform: translateY(-15%);
  }


  .lateral-sliding {
    width: 340px;
    height: 70px;
    border-radius:10px;
    border: 1px solid #888;
    display: flex;
    margin: 0 auto;
    overflow-y: hidden;
    overflow-x: scroll;
  }
  .lateral-sliding-item {
    display: flex;
    margin-right: 8px;
    background-color: #fff;
  }
  .each{
    width: 60px;
    display: flex;
    /* line-height: 30px; */
    flex-direction: column;
  }
  .each span{
    font-size: 12px;
    line-height: 20px;
    margin-top: 10px;
  }

  .demo-nav{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 3.2rem;
    background-color: #fff;
  }
  .demo-nav__title {
    font-weight: 450;
    font-size: 1rem;
    text-transform: capitalize;
  }
  .demo-nav__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content:center;
    height: 100%;
    position: relative;
    margin-bottom: 50px ;
  }
  .block {
    width: 100%;
    height: 70%;
    background-color: #fff;
    bottom: 0;
    position: absolute;
    padding: 1rem 1rem 3.125rem 1rem;
    overflow: auto;
  }
  .block .block-top{
    padding-left: 1rem;
    font-weight: 700;
  }
  .block .block-bottom{
    padding: 1rem;
    width: 91%;
    position: fixed;
    z-index: 100;
    bottom: 0rem;
    background-color: #fff;
  }

  .block .block-list{
    padding: 1rem 1.5rem;
  }

  .block .block-list .block-list-demo{
    padding: 1rem 0;
    position: relative;
  }

  .block .block-list .block-list-demo .block-list-demos{
    margin-top: 0.5rem;
    margin-left: 2.5rem;
  }
  .block .block-list .block-list-demo .block-list-demos .block-list-ademos{
    padding-top: 0.5rem;
  }
  .block .block-list .block-list-demo .block-list-demos img{
    width: 1rem;
    height: 1rem;
  }

  .block .block-list .block-list-demo img{
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    float: left;
    margin: 0;
  }
  .block .block-list .list-demo-content{
    margin-left: 0.5rem;
    width: 70%;
    display: inline-block;
  }
  .block .block-list .list-demo-content div{
    padding-bottom: 0.5rem;
  }
  .block .block-list .list-demo-content div h3{
    font-size: 0.75rem;
  }
  .block .block-list .list-demo-content div p{
    font-size: 0.5rem;
  }
  .block .block-list .block-list-like{
    display: inline-block;
  }

</style>
